{% extends "oa/base.html" %}
{% block this_css %} {% endblock %}
{% block content %}
    <section class="wrapper" style="padding-top: 20px ">
        <div class="col-lg-12">
            <div class="panel">
                <div class="panel-body">
                    <form class="form-inline" method="get" action="{{ request.path }}">
                        <div class="form-group">
                            <label for="channel_id">销售部门：</label>
                            <select name="channel_id" id="id_channel_id" class="form-control">
                                <option value="">全部</option>
                                {% for channel in channels %}
                                    {% if channel.pk|escape == request.GET.channel_id|escape %}
                                        <option value="{{ channel.pk }}" selected>{{ channel.name }}</option>
                                    {% else %}
                                        <option value="{{ channel.pk }}">{{ channel.name }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="date_start">开始日期：</label>
                            <input type="date" class="form-control" id="date_start" name="date_start"
                                   value="{{ request.GET.date_start }}">
                        </div>
                        <div class="form-group">
                            <label for="date_end">截止日期：</label>
                            <input type="date" class="form-control" id="date_end" name="date_end"
                                   value="{{ request.GET.date_end }}">
                        </div>
                        <button type="submit" class="btn btn-info">搜索</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="text-center" style="padding-bottom: 50px">
                <h2>
                    部分产品的成本尚未核对，统计结果不可信
                </h2>
            </div>
        </div>
        <div class="col-lg-6">
            <div id="sales_chart"></div>
        </div>
        <div class="col-lg-6">
            <div class="panel  panel-default">
                <div class="panel-heading">
                    销售额与成本
                </div>
                <div class="panel-body">
                    <table class="table table-striped table-bordered table-responsive">
                        <thead>
                        <tr>
                            <th>年</th>
                            <th>月</th>
                            <th>市场部</th>
                            <th>收入</th>
                            <th>成本</th>
                            <th>利润</th>
                            <th>利润率</th>
                        </tr>
                        </thead>
                        <tbody>{% for year, y_data in data.items %}{% for month, m_data in y_data.items %}{% for sales_channel, sales in m_data.items %}
                            <tr>
                                <td>{{ year }}</td>
                                <td>{{ month }}</td>
                                <td>{{ sales_channel }}</td>
                                <td>{{ sales.total_income|floatformat:'2' }}</td>
                                <td>{{ sales.product_costs|floatformat:'2' }}</td>
                                <td>{{ sales.total_profits|floatformat:'2' }}</td>
                                <td>{{ sales.profits_per|floatformat:'2' }} %</td>
                            </tr>
                        {% endfor %}{% endfor %}{% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
{% endblock %}


{% block this_js %}
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <script language="JavaScript">
        Highcharts.chart('sales_chart', {
            credits: {enabled: false},
            chart: {
                type: 'column'
            },
            title: {
                text: '销售额和利润'
            },
            xAxis: {
                categories: {{ categories|safe }}
            },
            series: {{ series|safe }}
        });

    </script>
{% endblock %}

